<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <swiper-slide v-for="item of swiperList" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>

</template>


<script>
export default {
    name:'HomeSwiper',
    data () {
        return {
           swiperOption :{
            pagination :'.swiper-pagination',
            loop:true,
            autoplay:3000
           },
           swiperList:[{
               id:'01',
               imgUrl:'http://img1.qunarzz.com/piao/fusion/1807/e7/d70d0830a9941b02.jpg_750x200_f8c7d2ad.jpg'
           },{
               id:'02',
               imgUrl:'http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg'
           },{
               id:'03',
               imgUrl:'http://img1.qunarzz.com/piao/fusion/1806/1c/4847ea66072c7b02.jpg_750x200_c32457fb.jpg'
           },{
               id:'04',
               imgUrl:'http://img1.qunarzz.com/piao/fusion/1806/8f/d09fa241a01ac02.jpg_750x200_e0c86013.jpg'
           },{
               id:'05',
               imgUrl:'http://img1.qunarzz.com/piao/fusion/1807/40/1d7be74ed1584002.jpg_750x200_c41233c9.jpg'
           }]
        }
    }
}
</script>


<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
    background #fff
.wrapper
    overflow hidden
    width 100%
    height 0
    padding-bottom 26.6%
    background #eee
    .swiper-img
         width 100%
</style>

